<template>
	<view class="container" :style="{ paddingTop: (statusBarHeight * 2 + 30) + 'rpx' }">
		<!-- 背景动画粒子 -->
		<view class="particles">
			<view class="particle" v-for="i in 15" :key="i" :style="particleStyle(i)"></view>
		</view>
		
		<!-- 背景形状 -->
		<view class="background-shapes">
			<view class="shape shape-1"></view>
			<view class="shape shape-2"></view>
			<view class="shape shape-3"></view>
		</view>
		
		<!-- Logo区域 -->
		<view class="logo-section">
			<view class="logo-wrapper">
				<view class="logo-circle"></view>
				<view class="logo-glow"></view>
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="app-name">美登思电气</view>
			<view class="app-subtitle">欢迎回来，请登录您的账户</view>
		</view>

		<!-- 登录表单 -->
		<view class="form-card">
			<view class="card-header">
				<text class="card-title">账户登录</text>
				<view class="card-subtitle">请输入您的账户信息</view>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<view class="input-icon-wrapper">
						<text class="input-icon">👤</text>
					</view>
					<input class="input" type="text" placeholder="请输入用户名/工号" v-model="form.username" 
						:class="{ 'has-value': form.username }" />
					<view class="input-line"></view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="input-wrapper">
					<view class="input-icon-wrapper">
						<text class="input-icon">🔒</text>
					</view>
					<input class="input" type="password" placeholder="请输入密码" v-model="form.password" 
						:class="{ 'has-value': form.password }" />
					<view class="input-line"></view>
				</view>
			</view>
			
			<view class="form-options">
				<view class="remember-me">
					<label class="checkbox-wrapper">
						<input type="checkbox" class="checkbox" :checked="rememberMe" @change="rememberMe = $event.target.checked"/>
						<view class="checkbox-custom"></view>
						<text class="checkbox-label">记住我</text>
					</label>
				</view>
				<view class="forgot-password" @tap="onForgotPassword">
					<text>忘记密码?</text>
				</view>
			</view>
		</view>

		<!-- 登录按钮和注册提示 -->
		<view class="login-wrapper">
			<button class="login-btn" :class="{ 'loading': loading, 'pulse': !loading && form.username && form.password }" 
				:loading="loading" @tap="onSubmit">
				<view class="btn-content">
					<view class="login-icon-wrapper">
						<text class="login-icon">→</text>
					</view>
					<text class="login-text">登录</text>
				</view>
				<view class="btn-loading">
					<view class="loading-spinner"></view>
				</view>
			</button>
			<view class="register-hint">
				<text>还没有账户? </text>
				<text class="register-link" @tap="onRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
import { apiLogin } from '@/services/api.js'
import { saveAuth, isAuthed } from '@/utils/auth.js'

export default {
	data() {
		return {
			form: {
				username: '',
				password: ''
			},
			loading: false,
			statusBarHeight: 0,
			rememberMe: false
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
	},
	onShow() {
		// 已登录直接进首页（tab）
		if (isAuthed()) {
			uni.switchTab({ url: '/pages/report/index' });
		}
	},
	methods: {
		particleStyle(index) {
			const size = Math.random() * 6 + 2;
			const duration = Math.random() * 20 + 10;
			const delay = Math.random() * 5;
			const left = Math.random() * 100;
			
			return {
				width: `${size}rpx`,
				height: `${size}rpx`,
				left: `${left}%`,
				animationDuration: `${duration}s`,
				animationDelay: `${delay}s`,
				opacity: Math.random() * 0.4 + 0.1
			};
		},
		
		async onSubmit() {
			if (!this.form.username || !this.form.password) {
				return uni.showToast({ title: '请输入账号与密码', icon: 'none' });
			}
			this.loading = true;
			try {
				const res = await apiLogin(this.form);
				if (res && res.token) {
					saveAuth(res.token, res.user || null);
					uni.showToast({ title: '登录成功', icon: 'success' });
					setTimeout(() => {
						uni.switchTab({ url: '/pages/report/index' });
					}, 300);
				} else {
					uni.showToast({ title: '登录失败', icon: 'none' });
				}
			} catch (e) {
				if (e.statusCode == 401) {
					uni.showToast({ title: e.data.message, icon: 'none' });
				} else {
					uni.showToast({ title: '登录异常', icon: 'none' });
				}
			} finally {
				this.loading = false;
			}
		},
		onForgotPassword() {
			uni.showToast({ title: '忘记密码功能开发中', icon: 'none' });
		},
		onRegister() {
			uni.showToast({ title: '注册功能开发中', icon: 'none' });
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	height: 100vh;
	max-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 30rpx 40rpx 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

/* 粒子动画背景 */
.particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

.particle {
	position: absolute;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	animation: float infinite linear;
	bottom: -20rpx;
}

@keyframes float {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-120vh) rotate(360deg);
		opacity: 0;
	}
}

.background-shapes {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

.shape {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	animation: pulse 8s infinite ease-in-out;
}

.shape-1 {
	width: 300rpx;
	height: 300rpx;
	top: -100rpx;
	right: -100rpx;
	animation-delay: 0s;
}

.shape-2 {
	width: 200rpx;
	height: 200rpx;
	bottom: 100rpx;
	left: -80rpx;
	animation-delay: 1.5s;
}

.shape-3 {
	width: 150rpx;
	height: 150rpx;
	bottom: 200rpx;
	right: 60rpx;
	animation-delay: 3s;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.1;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.15;
	}
}

.logo-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 0;
	flex-shrink: 0;
	padding-top: 40rpx;
	z-index: 1;
	position: relative;
}

.logo-wrapper {
	position: relative;
	margin-bottom: 20rpx;
	width: 140rpx;
	height: 140rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-circle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
	animation: rotate 20s infinite linear;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.logo {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: #fff;
	border: 4rpx solid #fff;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 2;
}

.logo-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	filter: blur(20rpx);
	z-index: 1;
	animation: glow 3s infinite alternate;
}

@keyframes glow {
	0% {
		opacity: 0.3;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(1.1);
	}
}

.app-name {
	font-size: 42rpx;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1rpx;
	margin-bottom: 10rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.app-subtitle {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
}

.form-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 50rpx 40rpx 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	margin: 30rpx 0;
	flex-shrink: 0;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	z-index: 1;
	position: relative;
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.form-card:active {
	transform: translateY(4rpx);
}

.card-header {
	margin-bottom: 50rpx;
	text-align: center;
}

.card-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.card-subtitle {
	font-size: 26rpx;
	color: #888;
}

.form-item {
	margin-bottom: 50rpx;
}

.input-wrapper {
	display: flex;
	align-items: center;
	border-radius: 16rpx;
	padding: 0 0 20rpx 0;
	background: transparent;
	position: relative;
}

.input-icon-wrapper {
	width: 60rpx;
	height: 60rpx;
	border-radius: 16rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
	transition: transform 0.2s;
}

.input-wrapper:focus-within .input-icon-wrapper {
	transform: scale(1.05);
}

.input-icon {
	font-size: 28rpx;
	color: #fff;
}

.input {
	flex: 1;
	font-size: 30rpx;
	color: #333;
	background: transparent;
	line-height: 1.4;
	padding: 20rpx 0;
	border: none;
	transition: all 0.3s;
}

.input.has-value {
	font-weight: 500;
}

.input-line {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2rpx;
	background: #e8e8e8;
	transition: all 0.3s;
}

.input-wrapper:focus-within .input-line {
	height: 4rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
}

.remember-me {
	display: flex;
	align-items: center;
}

.checkbox-wrapper {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.checkbox {
	display: none;
}

.checkbox-custom {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #ddd;
	border-radius: 6rpx;
	margin-right: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	position: relative;
}

.checkbox:checked + .checkbox-custom {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: #667eea;
	box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.checkbox:checked + .checkbox-custom::after {
	content: "✓";
	color: white;
	font-size: 20rpx;
	font-weight: bold;
}

.checkbox-label {
	font-size: 26rpx;
	color: #666;
}

.forgot-password {
	font-size: 26rpx;
	color: #667eea;
	font-weight: 500;
}

.login-wrapper {
	padding: 0 4rpx;
	flex-shrink: 0;
	padding-bottom: 40rpx;
	z-index: 1;
	position: relative;
}

.login-btn {
	width: 100%;
	height: 96rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 48rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12rpx 30rpx rgba(102, 126, 234, 0.5);
	transition: all 0.3s;
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.login-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
}

.login-btn.pulse {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 12rpx 30rpx rgba(102, 126, 234, 0.5);
	}
	50% {
		box-shadow: 0 12rpx 30rpx rgba(102, 126, 234, 0.8);
	}
	100% {
		box-shadow: 0 12rpx 30rpx rgba(102, 126, 234, 0.5);
	}
}

.login-btn.loading {
	pointer-events: none;
}

.login-btn.loading .btn-content {
	opacity: 0;
}

.login-btn.loading .btn-loading {
	opacity: 1;
}

.btn-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	transition: opacity 0.3s;
}

.login-icon-wrapper {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s;
}

.login-btn:active .login-icon-wrapper {
	transform: translateX(4rpx);
}

.login-icon {
	font-size: 20rpx;
	font-weight: bold;
}

.login-text {
	font-size: 32rpx;
	font-weight: 600;
}

.btn-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	border-top: 4rpx solid #fff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.register-hint {
	text-align: center;
	margin-top: 30rpx;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
}

.register-link {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}

/* 美化占位符 */
::-webkit-input-placeholder {
	color: #bbb;
	font-size: 28rpx;
}

::-moz-placeholder {
	color: #bbb;
	font-size: 28rpx;
}

:-ms-input-placeholder {
	color: #bbb;
	font-size: 28rpx;
}
</style>